<template>
   <div class="sub-filter" v-if="newList.length">
     <div class="item"  v-for="item in newList" :key="item.id">
       <div class="head">{{item.name}}：</div>
       <div class="body">
         <a href="javascript:;" :class="{active:!item.actuveId}" @click="select(item,null)" class="mya">全部</a>
         <a href="javascript:;" class="txt" @click="select(item,i.id)" :class="{active:item.actuveId===i.id}" v-for="i in item.properties" :key="i.id">{{i.name}}</a>
       </div>
     </div>
   </div>
          <div v-else class="sub-filter">
    <XtxSkeleton class="item" width="800px" height="40px"  />
    <XtxSkeleton class="item" width="800px" height="40px"  />
    <XtxSkeleton class="item" width="600px" height="40px"  />
    <XtxSkeleton class="item" width="600px" height="40px"  />
    <XtxSkeleton class="item" width="600px" height="40px"  />
  </div>

</template>
<script>
import { findSubCategoryFilter } from '@/api/category'
import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
export default {
  name: 'SubFilter',
  setup (props, { emit }) {
    const route = useRoute()
    // 获取数据
    const newList = ref([])
    const getInFo = async (id) => {
      const list = (await findSubCategoryFilter(id)).result
      newList.value = [{ id: 999999, name: '品牌', properties: list.brands }, ...list.saleProperties]
    }
    watch(() => route.params.id, (id) => {
      if (route.path === `/category/sub/${id}`) {
        getInFo(id)
        // 重置属性
        attrs = []
        brandId = null
      }
    }, { immediate: true })
    // 处理筛选的数据
    let attrs = []
    let brandId
    const select = (item, id) => {
      item.actuveId = id
      if (item.name === '品牌') brandId = id
      else {
        const index = attrs.findIndex(v => v.groupName === item.name)
        if (index === -1) attrs.push({ groupName: item.name, propertyName: id })
        else attrs[index].propertyName = id
      }
      const filtData = {}
      filtData.brandId = brandId
      filtData.attrs = attrs.filter(v => v.propertyName)
      emit('checked', filtData)
    }
    return { newList, select }
  }
}
</script>
<style scoped lang='less'>
     .xtx-skeleton {
      padding: 10px 0;
    }
  // 筛选区
  .sub-filter {
    background: #fff;
    padding: 25px;
    .item {
      display: flex;
      line-height: 40px;
      .head {
        width: 80px;
        color: #999;
      }
      .body {
        .mya{
          width: 100px;
          margin-right: 20px;
          text-align: left;
        }
        display: flex;
        align-content: center;
        flex-wrap:wrap;
        .txt{
          text-align: left;
          width: 100px;
          margin-right: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        flex: 1;
        a {
          margin-right: 36px;
          transition: all .3s;
          display: inline-block;
          &.active,
          &:hover {
            color: @xtxColor;
          }
        }
      }
    }
  }
</style>
